Creating Your First Flutter Project – Detailed Notes

Creating a Flutter project is the first practical step toward building mobile, web, and desktop applications with Flutter. A Flutter project contains the source code, configuration files, platform-specific folders, dependencies, tests, and other resources required to develop and run an application.

Flutter projects can be created using VS Code, Android Studio, IntelliJ, or the Flutter command-line tool. In this lesson, we will focus mainly on creating a project using VS Code and the Flutter CLI.

For structured Flutter learning and professional training, visit JustAcademy Flutter Training. You can also register for a course demo through JustAcademy Course Demo Registration.

1. What Is a Flutter Project?

A Flutter project is a structured collection of files and directories used to build a Flutter application. When you create a Flutter project, the Flutter tool automatically generates the basic project structure and starter code.

A Flutter project can contain code for multiple supported platforms, allowing developers to maintain an application from a common Flutter codebase.

Basic Flutter Project Structure

my_first_flutter_app/
│
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
├── pubspec.lock
└── README.md

2. Requirements Before Creating a Flutter Project

Before creating your first Flutter application, make sure the development environment is configured correctly.

• Flutter SDK installed
• Dart SDK available through Flutter
• Visual Studio Code or another supported IDE
• Flutter extension installed in VS Code
• Dart extension installed in VS Code
• Git installed
• At least one target device configured

You can verify the Flutter environment by running:

flutter doctor

For detailed diagnostic information, use:

flutter doctor -v

3. Creating a Flutter Project Using VS Code

VS Code provides an integrated workflow for creating a Flutter project. According to the Flutter documentation, you can open the Command Palette, select Flutter: New Project, choose the Application template, select the project location, and enter a project name. VS Code then uses Flutter tooling to create and initialize the project.

Step 1: Open VS Code

Launch Visual Studio Code from your operating system.

Step 2: Open Command Palette

Use the following shortcut:

Ctrl + Shift + P

On macOS:

Cmd + Shift + P

Step 3: Search for Flutter

Type:

Flutter

Select:

Flutter: New Project

Step 4: Select Application Template

VS Code will ask which Flutter template you want to use. For a normal Flutter application, select:

Application

Step 5: Select Project Location

Select or create the parent directory where you want the new project to be created. You do not need to manually create the project folder because Flutter creates it automatically.

Step 6: Enter Project Name

Enter a project name using the recommended lowercase-with-underscores naming convention.

Example:

my_first_flutter_app

Avoid spaces and unnecessary special characters in Flutter project names.

Step 7: Wait for Project Initialization

Flutter generates the project structure, starter files, and required configuration. VS Code can show the progress through its notification and Output panel.

Step 8: Open the Project

After project creation, VS Code opens the newly created Flutter project. You can now open the lib directory and work with main.dart.

4. Creating a Flutter Project Using Terminal

Flutter also provides a command-line tool that can create new applications directly from a terminal.

Basic Command

flutter create my_first_flutter_app

This command creates a new Flutter project named my_first_flutter_app.

Step-by-Step Process

1. Open PowerShell, Command Prompt, Terminal, or another shell.
2. Navigate to the directory where you want to create the project.
3. Run the flutter create command.
4. Wait for Flutter to generate the project.
5. Move into the project directory.
6. Open the project in your preferred editor.

flutter create my_first_flutter_app

cd my_first_flutter_app

code .

Flutter's current documentation also supports creating a minimal application using the --empty option.

flutter create --empty my_first_flutter_app

5. Naming Rules for Flutter Projects

Flutter project names should follow the Dart naming convention commonly written as lowercase words separated by underscores.

Correct Examples

my_app
student_dashboard
flutter_learning
shopping_app
weather_application

Avoid Examples

My App
my-app
MyFlutterApp

Using a consistent naming convention makes projects easier to maintain and follows Dart and Flutter development conventions.

6. Understanding the Generated Flutter Project

When Flutter creates a project, it generates a standard structure containing application code, platform-specific code, tests, dependencies, and configuration files.

my_first_flutter_app/
│
├── android/
├── ios/
├── lib/
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
├── pubspec.lock
└── README.md

7. Understanding the lib Folder

The lib directory is one of the most important directories in a Flutter project. It commonly contains the application's Dart source code.

lib/
└── main.dart

As an application becomes larger, the lib directory can be organized into multiple folders.

lib/
├── main.dart
├── screens/
├── widgets/
├── models/
├── services/
└── utils/

Common Folder Purposes

8. Understanding main.dart

The main.dart file commonly acts as the entry point of a Flutter application.

A simple Flutter application can look like this:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First Flutter App'),
        ),
        body: const Center(
          child: Text('Hello Flutter!'),
        ),
      ),
    );
  }
}

Important Parts

9. Understanding main()

The main() function is the entry point of a Dart application. Flutter applications are Dart programs, so execution begins from the Dart main() function.

void main() {
  runApp(const MyApp());
}

The runApp() function receives the root widget of the application and attaches it to the Flutter rendering system.

10. Understanding runApp()

The runApp() function starts the Flutter application by making the supplied widget the root of the widget tree.

runApp(const MyApp());

In this example, MyApp becomes the root widget.

MyApp
  |
  └── MaterialApp
        |
        └── Scaffold
              |
              ├── AppBar
              └── Center
                    |
                    └── Text

11. Understanding Widgets

Flutter builds user interfaces using widgets. Widgets describe what the user interface should look like and how it should behave.

Examples of Common Widgets

• Text
• Container
• Row
• Column
• Center
• Image
• Icon
• ElevatedButton
• TextField
• Scaffold
• AppBar

Example

const Center(
  child: Text('Hello Flutter'),
)

Here, Center is the parent widget and Text is its child.

12. Understanding the Widget Tree

Flutter user interfaces are constructed as a hierarchy of widgets called the widget tree.

MaterialApp
    |
    └── Scaffold
          |
          ├── AppBar
          |
          └── Center
                |
                └── Text

Understanding the widget tree is essential because Flutter applications are built by composing smaller widgets into larger UI structures.

13. Understanding MaterialApp

MaterialApp is commonly used as the root widget for applications that use Material Design components.

MaterialApp(
  title: 'My Flutter App',
  home: HomeScreen(),
)

Common MaterialApp Properties

• title
• home
• theme
• routes
• debugShowCheckedModeBanner

14. Understanding Scaffold

Scaffold provides a standard visual structure for many Material Design screens.

Scaffold(
  appBar: AppBar(
    title: const Text('Home'),
  ),
  body: const Center(
    child: Text('Welcome'),
  ),
)

Common Scaffold Properties

• appBar
• body
• drawer
• floatingActionButton
• bottomNavigationBar
• backgroundColor

15. Running Your First Flutter Application

After creating the project, select an available target device.

Run from VS Code

1. Open the Flutter project.
2. Select a target device from the VS Code status bar.
3. Press F5 to start debugging.
4. Alternatively, use Run > Start Without Debugging.

Run from Terminal

flutter run

The Flutter documentation also supports selecting a device and running the project through the Flutter CLI.

16. Selecting a Target Device

A Flutter application needs a target platform or device on which it can run.

Examples

• Android Emulator
• Physical Android Device
• Chrome
• Edge
• iOS Simulator on macOS
• Windows
• macOS
• Linux

To see devices detected by Flutter, run:

flutter devices

If no device is available, VS Code can display No Devices in the status bar.

17. Running the Project on Chrome

Flutter supports web applications. If Chrome is available as a configured target, you can run a Flutter project in Chrome.

flutter run -d chrome

Alternatively, select Chrome from the device selector in VS Code and start the application.

18. Running the Project on Android

You can run the Flutter project on an Android Emulator or a physical Android device after configuring Android development tools.

Check Available Devices

flutter devices

Run the Application

flutter run

If multiple devices are available, Flutter may ask you to choose a target or you can explicitly specify one.

19. Hot Reload

Hot reload is one of the most useful Flutter development features. It allows many code and UI changes to be applied to a running application quickly without performing a complete application restart.

Example

Original code:

Text('Hello Flutter!')

Change it to:

Text('Welcome to My First Flutter App!')

Save the file and perform hot reload. The updated text can appear in the running application while the current state is generally preserved.

20. Hot Restart

Hot restart restarts the running Flutter application and resets its current application state.

Hot restart is useful when a change requires the application to restart rather than simply applying a hot reload.

VS Code Command

Flutter: Hot Restart

21. Modifying Your First Flutter App

After creating the project, you can modify the starter application to understand how Flutter widgets work.

Example: Simple Welcome Screen

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My First Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First Flutter App'),
        ),
        body: const Center(
          child: Text(
            'Welcome to Flutter!',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

22. Adding a Button

You can add interactive widgets such as buttons to your application.

ElevatedButton(
  onPressed: () {
    print('Button clicked');
  },
  child: const Text('Click Me'),
)

Complete Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Button Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button clicked');
            },
            child: const Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

23. Creating a Simple Column Layout

The Column widget arranges its children vertically.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('Student Name'),
    const SizedBox(height: 10),
    const Text('Flutter Developer'),
    const SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: const Text('View Profile'),
    ),
  ],
)

Complete Example

import 'package:flutter/material.dart';

void main() {
  runApp(const StudentApp());
}

class StudentApp extends StatelessWidget {
  const StudentApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Student Profile'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Rahul Sharma',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              const Text('Flutter Development Student'),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {},
                child: const Text('View Profile'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

24. Understanding pubspec.yaml

The pubspec.yaml file is an important configuration file in a Flutter project. It contains project metadata, dependencies, assets, and Flutter-specific configuration.

Example

name: my_first_flutter_app

description: A Flutter learning application.

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Common Uses

• Define the project name.
• Define project description.
• Add packages and dependencies.
• Configure assets.
• Configure fonts.
• Configure Flutter-specific options.

25. Adding a Package to the Project

Flutter applications can use external packages to add functionality.

Using Flutter Pub

For example, you can add a package from the command line:

flutter pub add http

Flutter updates the project's dependency configuration and retrieves the package.

Retrieve Dependencies

flutter pub get

Import the Package

import 'package:http/http.dart' as http;

26. Understanding Platform Folders

Flutter projects can contain platform-specific directories.

Most application UI and business logic can be written in the shared Dart code under lib/, while platform-specific configuration and integration can be handled in the corresponding platform folders when necessary.

27. Creating a Minimal Flutter Project

If you want to start with a minimal application instead of the standard starter template, Flutter supports the --empty option.

flutter create --empty my_minimal_app

This is useful when you want to build the application structure yourself from a clean starting point.

28. Using Flutter Analyze

Flutter provides static analysis tools that can help identify coding issues.

flutter analyze

Run this command after making changes to your project to identify analyzer warnings and errors.

29. Running Flutter Tests

Flutter projects can contain automated tests in the test directory.

flutter test

Testing becomes increasingly important as applications grow and contain more business logic and reusable components.

30. Cleaning the Project

Sometimes generated build files or cached artifacts can cause development issues. Flutter provides a clean command.

flutter clean

After cleaning, dependencies can be retrieved again using:

flutter pub get

31. Opening the Project in VS Code

You should open the Flutter project root rather than only opening the lib folder.

Using Terminal

cd my_first_flutter_app
code .

The project root should contain the pubspec.yaml file.

32. Common First-Project Errors

Error 1: Flutter Command Not Found

flutter is not recognized as an internal or external command

Possible Solution:

1. Check that Flutter SDK is installed.
2. Check the Flutter SDK location.
3. Make sure the Flutter bin directory is available in PATH.
4. Restart the terminal.
5. Restart VS Code.
6. Run flutter doctor.

Error 2: No Devices Available

If no device is available, start an emulator, connect a physical device, or select a supported desktop/web target.

flutter devices

Error 3: Project Not Recognized as Flutter

Make sure VS Code has opened the folder containing pubspec.yaml.

my_first_flutter_app/
├── lib/
├── test/
├── pubspec.yaml
└── README.md

Error 4: Package Not Found

Run:

flutter pub get

If the problem continues, check the package name and version in pubspec.yaml.

33. Practical Project – Student Profile App

Let's create a simple Flutter application that displays student information.

Step 1: Create the Project

flutter create student_profile

Step 2: Open the Project

cd student_profile
code .

Step 3: Open main.dart

lib/main.dart

Step 4: Add the Following Code

import 'package:flutter/material.dart';

void main() {
  runApp(const StudentProfileApp());
}

class StudentProfileApp extends StatelessWidget {
  const StudentProfileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Student Profile',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Student Profile'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.person,
                size: 80,
              ),
              const SizedBox(height: 20),
              const Text(
                'Manish Negi',
                style: TextStyle(
                  fontSize: 26,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              const Text('Flutter Development'),
              const SizedBox(height: 10),
              const Text('Flutter Student'),
              const SizedBox(height: 25),
              ElevatedButton(
                onPressed: () {
                  print('Profile button clicked');
                },
                child: const Text('View Profile'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 5: Run the Application

flutter run

Expected UI Structure

Student Profile
-----------------------------
            👤
        Manish Negi
    Flutter Development
      Flutter Student

       [ View Profile ]

34. Practical Project – Counter Application

The counter application is useful for understanding state changes in Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const CounterApp());
}

class CounterApp extends StatefulWidget {
  const CounterApp({super.key});

  @override
  State createState() => _CounterAppState();
}

class _CounterAppState extends State {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Counter App'),
        ),
        body: Center(
          child: Text(
            'Counter: $counter',
            style: const TextStyle(
              fontSize: 28,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: incrementCounter,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Important Concepts

• StatefulWidget is used when UI state can change.
• setState() tells Flutter that state has changed and the widget should rebuild.
• The counter variable stores the current value.
• The floating action button calls incrementCounter().

35. Understanding the Flutter Development Cycle

Write Dart/Flutter Code
        ↓
Save Changes
        ↓
Flutter Analyzer
        ↓
Run / Debug
        ↓
Hot Reload
        ↓
Test UI and Logic
        ↓
Fix Errors
        ↓
Repeat

This development cycle allows developers to build Flutter applications incrementally and test changes quickly.

36. Recommended First-Project Workflow

1. Install Flutter and configure the development environment.
2. Install the Flutter and Dart extensions.
3. Run flutter doctor.
4. Create a Flutter project.
5. Open the project in VS Code.
6. Explore the generated folders and files.
7. Open lib/main.dart.
8. Understand main() and runApp().
9. Understand the widget tree.
10. Modify the starter UI.
11. Select a target device.
12. Run the application.
13. Test hot reload.
14. Use debugging tools.
15. Run flutter analyze.
16. Run flutter test.
17. Save the project in a Git repository.

37. Practice Exercise

Create a Flutter project named my_first_app.

Requirements

1. Create the project using VS Code.
2. Open lib/main.dart.
3. Change the application title to My First App.
4. Add an AppBar.
5. Display your name.
6. Display your course name.
7. Add an icon.
8. Add an ElevatedButton.
9. Run the project on an emulator or browser.
10. Modify the text and test hot reload.
11. Run flutter analyze.

Expected Structure

My First App
--------------------------
          👤

       Your Name

    Flutter Development

       [ Start Learning ]

38. Interview Questions

Q1. How do you create a Flutter project using VS Code?

Open the Command Palette, select Flutter: New Project, choose the Application template, select the parent folder, and enter a valid project name.

Q2. Which command creates a Flutter project from the terminal?

flutter create project_name

Q3. What is the entry point of a Flutter application?

The main() function is the entry point of a Dart application, including a Flutter application.

Q4. What is the purpose of runApp()?

runApp() attaches the root widget of the Flutter application to the Flutter framework.

Q5. What is main.dart?

main.dart is commonly the entry-point source file of a Flutter application and contains the main() function.

Q6. What is pubspec.yaml?

It is a Flutter project configuration file used for project metadata, dependencies, assets, fonts, and other configuration.

Q7. What is a widget tree?

A widget tree is the hierarchical structure formed by composing Flutter widgets.

Q8. How can you run a Flutter application from the terminal?

flutter run

Q9. How do you check available Flutter devices?

flutter devices

Q10. How do you check the Flutter development environment?

flutter doctor

39. First Flutter Project Checklist

• Flutter SDK installed
• VS Code installed
• Flutter extension installed
• Dart extension available
• flutter doctor checked
• Project created successfully
• Valid project name used
• pubspec.yaml available
• lib/main.dart available
• Target device selected
• Application successfully launched
• Hot reload tested
• Widgets understood
• Widget tree understood
• Basic UI modified
• flutter analyze executed
• Basic testing performed

40. Key Points to Remember

• A Flutter project contains source code, configuration, platform folders, tests, and dependencies.
• The flutter create command can generate a new Flutter application.
• VS Code provides the Flutter: New Project command for creating projects.
• Flutter project names should follow the lowercase-with-underscores convention.
• The lib directory commonly contains the main application source code.
• main.dart commonly contains the application entry point.
• main() is the Dart entry point.
• runApp() starts the Flutter widget tree.
• Flutter user interfaces are constructed using widgets.
• pubspec.yaml manages project metadata and dependencies.
• flutter run runs the application.
• flutter devices displays available devices.
• flutter doctor checks the development environment.
• Hot reload helps developers quickly see many UI and code changes.
• The --empty option can be used to create a minimal Flutter application.

41. Learning Resources

JustAcademy Flutter Training: https://www.justacademy.co/course-detail/flutter-training

JustAcademy Course Demo Registration: https://www.justacademy.co/register-for-course-demo

Official Flutter Guide – Create a New Flutter App: Create a New Flutter App

Official Flutter Guide – VS Code: Flutter Development in VS Code

Official Flutter Guide – Set Up and Test Drive: Set Up and Test Drive Flutter

Official Flutter Tutorial – Create an App: Create Your First Flutter App

Conclusion

Creating your first Flutter project is the foundation of Flutter application development. The process involves configuring Flutter, creating a project using VS Code or the Flutter CLI, understanding the generated project structure, opening main.dart, understanding widgets and the widget tree, selecting a target device, and running the application. Once the basic project is working, you can gradually add screens, widgets, packages, navigation, state management, APIs, databases, and other application features.